import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Switch, Redirect } from 'react-router-dom';
import AuthRequiredRoute from '@/components/hoc/authRequiredRoute';
import routes from './router/config';
import history from '@/utils/history';
import store from '@/store/configureStore';
import CurrentApp from '@/containers/index';

const LoadingMessage = () => <div>...</div>;
const appElement = document.getElementById('app');

// 全局阻止因报错引发的页面级崩溃
if (!React.Component.prototype.componentDidCatch) {
  React.Component.prototype.componentDidCatch = (/*error, info*/) => {
    return;
    // 错误上报
    // return Sentry.captureException(error, null, info);
  };
}

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <CurrentApp>
        <Suspense fallback={<LoadingMessage />}>
          <Switch>
            {routes.map((route) => (
              <AuthRequiredRoute key={route.path} {...route} />
            ))}
            <Redirect from='/*' to='/home' />
          </Switch>
        </Suspense>
      </CurrentApp>
    </Router>
  </Provider>,
  appElement
);
